import React, { ElementRef, FC, memo, useRef, useState } from "react";
import { useAppSelector } from "@/store";
import { shallowEqual } from "react-redux";
import {
  BannerControl,
  BannerLeft,
  BannerRight,
  BannerWrapper
} from "@/views/discover/c-views/recommend/c-components/top-banner/style";
import { Carousel } from "antd";
import classNames from "classnames";

interface IProps {
  children?: React.ReactNode;
}

const TopBanner: FC<IProps> = () => {
  const [currentIndex, setCurrentIndex] = useState(0);
  const { banners } = useAppSelector(
    (state) => ({
      banners: state.recommend.banners
    }),
    shallowEqual
  );
  const sliderRef = useRef<ElementRef<typeof Carousel>>(null);
  const handlePrevClick = () => {
    sliderRef.current?.prev();
  };
  const handleNextClick = () => {
    sliderRef.current?.next();
  };
  /**
   * 轮播图切换后的回调
   * @param current
   */
  const handleAfterChange = (current: number) => {
    setCurrentIndex(current);
  };
  // 背景图片
  let bgImage;
  if (currentIndex >= 0 && banners.length > 0) {
    bgImage = banners[currentIndex].imageUrl + "?imageView&blur=40*20";
  }
  const handleBeforeChange = (from:number, to:number) => {
    setCurrentIndex(-1)
  }

  return (
    <div>
      <BannerWrapper
      //style={{
      // background: `url('${bgImage}') center center / 6000px`
      //}}
      >
        <div className="banner wrap-v2">
          <BannerLeft>
            <Carousel
              ref={sliderRef}
              autoplay={true}
              dots={false}
              beforeChange={handleBeforeChange}
              afterChange={handleAfterChange}
            >
              {banners.map((item) => {
                return (
                  <div className={"banner-item"} key={item.imageUrl}>
                    <img
                      className={"image"}
                      src={item.imageUrl}
                      alt={item.typeTitle}
                    />
                  </div>
                );
              })}
            </Carousel>
            <ul className={"dots"}>
              {banners.map((item, index) => {
                return (
                  <li key={item.imageUrl} className={"dot"}>
                    <span
                      className={classNames("item", {
                        active: index === currentIndex
                      })}
                    ></span>
                  </li>
                );
              })}
            </ul>
          </BannerLeft>
          <BannerRight></BannerRight>
          <BannerControl>
            <button className="btn left" onClick={handlePrevClick}></button>
            <button className="btn right" onClick={handleNextClick}></button>
          </BannerControl>
        </div>
      </BannerWrapper>
    </div>
  );
};

export default memo(TopBanner);
